<template>
	<view>
		<view class="head">
			<view>
				<view class="picture">
						<u-avatar style="width: 99px; height: 99px;" :src="src"></u-avatar>
					</view>
					<view>{{text}}</view>
			</view>
		</view>
		<view class="material layout">
			<view>个人资料</view>
			<view>></view>
		</view>
		<view class="material">退出登录</view>
		<!-- 底部导航 -->
		<u-tabbar :list="tabbarList" height="40px"></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: 'https://img2.baidu.com/it/u=2421505363,3507499484&fm=26&fmt=auto&gp=0.jpg',
				text:'二狗'
			}
		},
		computed: {
			tabbarList (){
				return this.$store.state.common.tabbarList
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	body,html{
		width: 100%;
		height: 100%;
		background-color: #d1d1d1;
	}
.head{
	width: 100%;
	height: 200px;
	background-color: #3f89e6;
	color: #FFFFFF;
	margin-top: 2px;
	display: flex;
	justify-content:space-around;
	align-items: center;
	text-align: center;
	margin-bottom: 27px;
	.picture{
		width: 99px;
		height: 100px;
		margin-bottom: 10px;
	}
}
.material{
	line-height: 50px;
	width: 100%;
	height: 50px;
	background-color: #ffffff;
	margin-bottom: 25px;
	padding-right: 35px;
}
.layout{
	justify-content:space-between;
	display: flex;
}
</style>
